<template>
    <div class="outer">
        <div class="inner">
            <div>
                <el-form label-position="left" label-width="80px" :model="loginModel" size="mini">
                    <el-form-item label="用户名">
                        <el-input v-model="loginModel.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="loginModel.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="loginClickHandler" type="primary">登陆</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            labelPosition: "right",
            loginModel: {
                username: "",
                password: "",
            },
        };
    },
    methods: {
        goBack() {
            window.history.length > 1
                ? this.$router.go(-1)
                : this.$router.push("/");
        },
        loginClickHandler() {
            let ok = (res) => {
                this.goBack();
            };
            let err = (error) => {
                console.log(res);
            };
            this.$http
                .post("/authenticate/login", {
                    username: this.loginModel.username,
                    password: this.loginModel.password,
                })
                .then(ok)
                .catch(err);
        },
        logout() {
            this.$http
                .post("/authenticate/logout")
                .then((res) => {
                    logged = false;
                })
                .catch((error) => {
                    console.log(error);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.outer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .inner {
        width: 300px;
    }
}
</style>
